{% extends 'base_dashboard.html' %}

{% block title %}Roles & Permissions — {{ site_settings.institute_name }}{% endblock %}

{% block extra_css %}
<style>
  .role-card {
    border: none; border-radius: 1rem;
    box-shadow: 0 4px 24px rgba(15,37,87,.06);
    height: 100%;
  }
  .role-card .role-head {
    border-radius: 1rem 1rem 0 0;
    padding: 1.25rem 1.4rem;
    color: #fff;
  }
  .role-card.admin .role-head { background: linear-gradient(135deg,#b91c1c,#dc2626); }
  .role-card.support_staff .role-head { background: linear-gradient(135deg,#c2410c,#ea580c); }
  .role-card.teacher .role-head { background: linear-gradient(135deg,#047857,#059669); }
  .role-card.student .role-head { background: linear-gradient(135deg,#1e40af,#2563eb); }
  .role-card ul { padding-left: 1.1rem; margin: 0; }
  .role-card li { margin-bottom: .45rem; font-size: .875rem; color: #475569; }
</style>
{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-start mb-4 flex-wrap gap-2">
  <div>
    <h4 class="fw-bold mb-1">Roles &amp; Permissions</h4>
    <p class="text-muted small mb-0">Defined platform roles and what each role can do ({{ total_users }} users total).</p>
  </div>
  <div class="d-flex gap-2">
    <a href="{% url 'dashboard:manage_users' %}" class="btn btn-outline-primary btn-sm">
      <i class="bi bi-people me-1"></i>Manage Users
    </a>
    <a href="{% url 'dashboard:admin_user_add' %}" class="btn btn-primary btn-sm">
      <i class="bi bi-person-plus me-1"></i>Add User
    </a>
  </div>
</div>

<div class="alert alert-light border rounded-4 small mb-4">
  <i class="bi bi-info-circle text-primary me-1"></i>
  To change someone’s role, open <strong>Manage Users</strong> and click <strong>Edit</strong> on that user.
  Roles are: <strong>Admin</strong>, <strong>Teacher</strong>, and <strong>Student</strong>.
</div>

<div class="row g-4">
  {% for role in roles %}
  <div class="col-md-6 col-xl-3">
    <div class="card role-card {{ role.code }}">
      <div class="role-head d-flex justify-content-between align-items-center">
        <div>
          <div class="fw-bold fs-5">{{ role.label }}</div>
          <div class="small opacity-75">Role code: {{ role.code }}</div>
        </div>
        <div class="text-end">
          <div class="fs-3 fw-bold lh-1">{{ role.count }}</div>
          <div class="small opacity-75">users</div>
        </div>
      </div>
      <div class="card-body p-4">
        <div class="text-uppercase text-muted fw-bold mb-2" style="font-size:.68rem;letter-spacing:.06em;">Capabilities</div>
        <ul>
          {% for item in role.permissions %}
            <li>{{ item }}</li>
          {% endfor %}
        </ul>
        <a href="{% url 'dashboard:manage_users' %}?role={{ role.code }}" class="btn btn-sm btn-outline-secondary mt-3 w-100">
          View {{ role.label }} users
        </a>
      </div>
    </div>
  </div>
  {% endfor %}
</div>
{% endblock %}